<script lang="ts" setup>
import { onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { testData, defaultVal } from './data'
// 富文本
let myQuillEditor = ref(null)

const content = ref<any>('')
const editorOption = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      [{ size: ['small', false, 'large', 'huge'] }],
      [{ font: [] }],
      [{ align: [] }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ header: 1 }, { header: 2 }],
      ['image'],
      [{ direction: 'rtl' }],
      [{ color: [] }, { background: [] }]
    ]
  }
}
const setValue = () => {
  console.log('setValue-富文本--')
}
// table 删除
const multipleSelection = ref<[]>([])
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}
const handlerMuchDel = () => {
  multipleSelection.value.forEach((row) => {
    const index = tempData.indexOf(row)
    handlerDel(index)
  })
}

//删除单个
const handlerDel = (index) => {
  tempData.splice(index, 1)
}
// table分页
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(10)
const handleSizeChange = (val: []) => {}
const handleCurrentChange = (val: []) => {}
// 新建、详情、编辑
let dialogVisible = ref<Boolean>(false)
let showDetail = ref<Boolean>(false)
let showEdit = ref<Boolean>(false)
let formNumTip = '提交后系统自动生成'
// 冗余默认数据
const exDefaultVal = {
  formNum: '提交后系统自动生成',
  abilityCode: '',
  abilityName: '',
  abilityType: '',
  deliverWay: '',
  stackStatus: '待上架',
  reviewStatus: '待评审',
  testStatus: '待测试',
  descri: '',
  banner: '',
  province: '',
  provider: '',
  contactPer: '',
  phone: '',
  mail: '',
  version: '',
  approveStatus: '',
  updatePer: '',
  updateTime: '',
  abilityTag: '',
  tuijianTag: '',
  abilityIntroduce: '',
  formStatus: '0',
  funcName: '',
  funcDesc: '',
  advName: '',
  advDesc: '',
  sceneName: '',
  sceneDesc: '',
  serviceData: [
    {
      name: '',
      id: '',
      type: ''
    },
    {
      name: '',
      id: '',
      type: ''
    }
  ]
}
// 新建弹窗
const changeDialogShow = () => {
  dialogVisible.value = !dialogVisible.value
  if (showDetail.value) {
    showDetail.value = false
    // showEdit.value = false
    resetForm(myFormRef.value)
    for (let key in formData) {
      if (key == 'abilityIntroduce') myQuillEditor.value.setHTML(exDefaultVal[key])
      formData[key] = exDefaultVal[key]
    }
  }
  if (!dialogVisible.value) {
    showEdit.value = false
    editRow = -1
    resetForm(myFormRef.value)
    for (let key in formData) {
      if (key == 'abilityIntroduce') myQuillEditor.value.setHTML(exDefaultVal[key])
      formData[key] = exDefaultVal[key]
    }
  }
}

const changeDetailShow = () => {}

// 详情弹窗，不可编辑
const changeDetailDialog = (data) => {
  changeDialogShow()
  showDetail.value = true
  // 设置展示数据
  const { row } = data
  Object.assign(formData, row)
  myQuillEditor.value.setHTML(formData['abilityIntroduce'])
}
let editRow = -1
// 编辑弹窗
const changeEditDialog = (data) => {
  const { row } = data
  editRow = data.$index
  console.log(11)
  Object.assign(formData, row)
  myQuillEditor.value.setHTML(formData['abilityIntroduce'])
  changeDialogShow()
  showEdit.value = true
}

// 重新提交
const reSubmit = (data) => {
  tempData[data.$index].formStatus = '0'
  ElMessage({
    message: '提交成功',
    type: 'success'
  })
}

// 撤回
const rollBack = (data) => {
  tempData[data.$index].formStatus = '1'
  ElMessage({
    message: '撤回成功',
    type: 'success'
  })
}

// el-upload回调
let imageUrl = ref<String>('')
const handleAvatarSuccess = () => {}
const beforeAvatarUpload = () => {}

let forNum = 9
let exName = '1010000'
const formData = reactive(defaultVal)

// formStatus 0 已提交 1 已撤回 2 已完成
const tempData = reactive(testData)

// 表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const myFormRef = ref(null)
const submitForm = async (formEl: any) => {
  // 编辑提交
  if (editRow !== -1) {
    Object.assign(tempData[editRow], formData)
    tempData[editRow].formStatus = '0'
    editRow = -1
    resetForm(formEl)
    changeDialogShow()
    showEdit.value = false
    for (let key in formData) {
      if (key == 'abilityIntroduce') myQuillEditor.value.setHTML(exDefaultVal[key])
      formData[key] = exDefaultVal[key]
    }
  } else {
    // 新增提交
    await formEl.validate((valid, fields) => {
      if (valid) {
        ElMessage({
          message: '提交成功',
          type: 'success'
        })

        formData.formNum = exName + forNum++
        tempData.push(JSON.parse(JSON.stringify(formData)))
        total.value = tempData.length
        setTimeout(() => {
          changeDialogShow()
          resetForm(formEl)
          for (let key in formData) {
            if (key == 'abilityIntroduce') myQuillEditor.value.setHTML(exDefaultVal[key])
            formData[key] = exDefaultVal[key]
          }
        }, 1000)
      } else {
        ElMessage({
          message: '请补充信息',
          type: 'warning'
        })
      }
    })
  }
}
console.log(11)

const rules = reactive({
  abilityName: [{ required: true, message: '请选择能力名称', trigger: 'change' }],
  abilityType: [{ required: true, message: '请选择能力分类', trigger: 'blur' }],
  descri: [{ required: true, message: '请输入摘要描述', trigger: 'blur' }]
})

onMounted(() => {
  total.value = tempData.length
})
</script>

<template>
  <div class="ability-container">
    <div class="main-content">
      <div class="table-container">
        <div class="btn-group">
          <el-row class="mb-4">
            <el-button @click="changeDialogShow" type="primary">新建</el-button>
            <el-button @click="handlerMuchDel">删除</el-button>
          </el-row>
        </div>
        <div class="table-body">
          <el-row>
            <el-table :data="tempData" border style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="45" align="center" />
              <el-table-column type="index" label="序号" width="55" align="center">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="formNum" label="申请单号" width="120" align="center" />
              <!-- <el-table-column prop="abilityCode" label="能力编码" width="180" align='center' /> -->
              <el-table-column prop="abilityName" label="能力名称" width="120" align="center" />
              <el-table-column prop="version" label="版本号" width="120" align="center" />
              <!-- <el-table-column prop="deliverWay" label="交付方式" width="100" align="center" /> -->
              <el-table-column prop="method" label="交付方式" width="110" show-overflow-tooltip>
                <template #default="{ row }">
                  <el-tag>{{ row.deliverWay }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="abilityType" label="能力分类" width="100" align="center" />
              <el-table-column prop="reviewStatus" label="评审状态" width="90" align="center" />
              <el-table-column prop="descri" label="描述" align="center" width="180" show-overflow-tooltip />
              <el-table-column prop="province" label="归属省" width="80" align="center" />
              <el-table-column prop="provider" label="提供方" width="140" align="center" />
              <el-table-column prop="contactPer" label="联系人" width="90" align="center" />
              <el-table-column prop="phone" label="联系电话" width="120" align="center" />
              <el-table-column prop="updatePer" label="上报人" align="center" width="90" />
              <el-table-column prop="updateTime" label="上报时间" align="center" width="150" />
              <el-table-column label="操作" width="140" align="center" fixed="right">
                <template #default="scope">
                  <!-- <template v-if="scope.status === '2'"> -->
                  <el-button @click.prevent="changeDetailDialog(scope)" link type="primary" size="small">详情</el-button>

                  <el-button v-if="scope.row.formStatus === '1'" @click.prevent="reSubmit(scope)" link type="primary" size="small">
                    提交
                  </el-button>
                  <el-button v-if="scope.row.formStatus === '0'" @click.prevent="rollBack(scope)" link type="primary" size="small">
                    撤回
                  </el-button>
                  <el-button v-if="scope.row.formStatus === '1'" @click.prevent="changeEditDialog(scope)" link type="primary" size="small">
                    编辑
                  </el-button>
                  <!-- <el-button v-if="scope.row.formStatus === '1'" @click.prevent="handlerDel(scope.$index)" link type="primary" size="small">
                    删除
                  </el-button> -->
                  <!-- </template> -->
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="sizes,prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 弹出框 -->
    <div v-show="dialogVisible" class="ability-modal">
      <div @click="changeDialogShow" class="mask"></div>
      <div class="form">
        <div class="title">
          <div v-show="dialogVisible && !showDetail && !showEdit" class="char">新增</div>
          <div v-show="showDetail" class="char">详情</div>
          <div v-show="showEdit" class="char">编辑</div>
          <!-- <div class="char"> -->
          <el-icon @click="changeDialogShow"><close /></el-icon>
          <!-- </div> -->
        </div>
        <div class="content-wrapper">
          <div class="content">
            <div v-show="showDetail" class="content-mask"></div>
            <el-form ref="myFormRef" :model="formData" :rules="rules">
              <el-row style="display: flex; justify-content: space-between">
                <el-col :span="24">
                  <el-form-item label="申请单号">
                    <el-input disabled v-model="formData.formNum" :placeholder="formNumTip" clearable />
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 能力名称 交付方式  -->
              <el-row style="display: flex; justify-content: space-between">
                <el-col :span="11">
                  <el-form-item prop="abilityName" label="能力名称">
                    <el-input v-model="formData.abilityName" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="交付方式">
                    <el-select v-model="formData.deliverWay" placeholder="" clearable>
                      <el-option label="API" value="API" />
                      <el-option label="SDK" value="SDK" />
                      <el-option label="H5" value="H5" />
                      <el-option label="私有化部署" value="私有化部署" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 申请单号  能力分类 -->
              <el-row style="display: flex; justify-content: space-between">
                <!-- <el-col :span="11">
                <el-form-item label="能力编码">
                  <el-input disabled v-model="formData.abilityCode" clearable />
                </el-form-item>
              </el-col> -->
                <el-col :span="24">
                  <el-form-item prop="abilityType" label="能力分类">
                    <el-select v-model="formData.abilityType" placeholder="" clearable>
                      <el-option label="行业能力" value="行业能力" />
                      <el-option label="通用能力" value="通用能力" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 展示用 -->
              <el-row>
                <div class="wrapper-outer">
                  <div class="header">
                    服务列表
                    <!-- <div style="margin-left: 10px" class="tool">
                    <el-button  icon="Plus" size="small"></el-button>
                    <el-button  icon="Minus" size="small"></el-button>
                  </div> -->
                  </div>
                  <template v-for="(item, index) in formData.serviceData" :key="index">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.name" placeholder="服务名称" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.id" placeholder="服务ID" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.type" placeholder="服务类型" clearable />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </template>
                </div>
              </el-row>

              <!-- 能力标签 推荐标签 -->
              <el-row style="display: flex; justify-content: space-between">
                <el-col :span="11">
                  <el-form-item label="能力标签">
                    <el-input v-model="formData.abilityTag" placeholder="" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="推荐标签">
                    <el-input v-model="formData.tuijianTag" placeholder="" clearable />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row style="display: flex; justify-content: space-between">
                <el-col :span="24">
                  <el-form-item prop="descri" label="摘要描述">
                    <el-input v-model="formData.descri" placeholder="" maxlength="100" :show-word-limit="true" type="textarea" clearable />
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 能力介绍-富文本 style="height: 300px" formData.abilityIntroduce -->
              <div class="edtior">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="能力介绍">
                      <QuillEditor
                        ref="myQuillEditor"
                        theme="snow"
                        v-model:content="formData.abilityIntroduce"
                        :options="editorOption"
                        contentType="html"
                        @update:content="setValue()" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <!-- 展示用 -->
              <!-- <el-row>
                <div class="wrapper-outer">
                  <div class="header"> -->

              <!-- <div style="margin-left: 10px" class="tool">
                    <el-button  icon="Plus" size="small"></el-button>
                    <el-button  icon="Minus" size="small"></el-button>
                  </div> -->
              <!-- </div> -->
              <!-- <template v-for="(item, index) in formData.serviceData" :key="index">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.name" placeholder="服务名称" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.id" placeholder="服务ID" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item>
                          <el-input v-model="item.type" placeholder="服务类型" clearable />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </template>
                </div>
              </el-row> -->

              <!-- 能力标签 推荐标签 -->
              <!-- <el-row style="display: flex; justify-content: space-between">
                <el-col :span="11">
                  <el-form-item label="能力标签">
                    <el-input v-model="formData.abilityTag" placeholder="" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="推荐标签">
                    <el-input v-model="formData.tuijianTag" placeholder="" clearable />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row style="display: flex; justify-content: space-between">
                <el-col :span="24">
                  <el-form-item prop="descri" label="摘要描述">
                    <el-input v-model="formData.descri" placeholder="" maxlength="100" :show-word-limit="true" type="textarea" clearable />
                  </el-form-item>
                </el-col>
              </el-row> -->

              <!-- 能力介绍-富文本 style="height: 300px" -->
              <!-- <div class="edtior">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="能力介绍">
                      <QuillEditor
                        ref="myQuillEditor"
                        theme="snow"
                        v-model:content="formData.abilityIntroduce"
                        :options="editorOption"
                        contentType="html"
                        @update:content="setValue()" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div> -->

              <!--  封面  -->
              <el-form-item label="封面" label-width="68">
                <el-upload
                  class="avatar-uploader"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
              <div style="margin-left: 68px; font-size: 12px" class="tip"
                >请上传260*160像素的图片，格式为png、jpg、jpeg，图片大小不超过2M</div
              >

              <el-row>
                <div class="topic-head"> 能力运营信息 </div>
                <div class="wrapper-outer">
                  <div class="header"> 能力功能 </div>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="优势一" label-width="68">
                        <el-input v-model="formData.funcName" maxlength="15" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="优势简介">
                        <el-input v-model="formData.funcDesc" maxlength="60" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label-width="68">
                        <div class="add-item"> +添加 </div>
                        <!-- <el-input disabled placeholder="" clearable /> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>

                <div class="wrapper-outer">
                  <div class="header"> 能力优势 </div>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="优势一" label-width="68">
                        <el-input v-model="formData.advName" maxlength="15" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="优势简介">
                        <el-input v-model="formData.advDesc" maxlength="60" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label-width="68">
                        <div class="add-item"> +添加 </div>
                        <!-- <el-input disabled placeholder="" clearable /> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>

                <div class="wrapper-outer">
                  <div class="header"> 典型应用场景 </div>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="场景一" label-width="68">
                        <el-input v-model="formData.sceneName" maxlength="15" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="场景简介">
                        <el-input v-model="formData.sceneDesc" maxlength="60" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label-width="68">
                        <div class="add-item"> +添加 </div>
                        <!-- <el-input disabled placeholder="" clearable /> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>

                <div class="wrapper-outer">
                  <div class="header">
                    使用案例
                    <span>考虑门户展示效果，建议上传的案例数为偶数个。</span>
                  </div>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="案例一" label-width="68">
                        <el-input maxlength="10" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                      <div style="position: relative">
                        <el-form-item label="案例主图" label-width="68">
                          <el-upload
                            class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                          </el-upload>
                        </el-form-item>
                        <div style="font-size: 12px; position: absolute; width: 168px; bottom: 0; right: 0; color: #d7d7d7"
                          >请上传260*160像素的图片，格式为png、jpg、jpeg，图片大小不超过2M</div
                        >
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="案例简介" label-width="68">
                        <div class="tall-textarea">
                          <el-input maxlength="10" :show-word-limit="true" placeholder="" type="textarea" clearable />
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label-width="68">
                        <div class="add-item"> +添加 </div>
                        <!-- <el-input disabled placeholder="" clearable /> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-row>

              <!--  -->
              <el-row>
                <div class="topic-head">能力提供方信息</div>
                <div style="padding-top: 20px" class="wrapper-outer">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="提供方单位" label-width="68">
                        <el-input v-model="formData.provider" maxlength="10" :show-word-limit="true" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="联系人">
                        <el-input v-model="formData.contactPer" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="联系电话">
                        <el-input v-model="formData.phone" placeholder="" clearable />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label-width="68">
                        <div class="add-item"> +添加 </div>
                        <!-- <el-input disabled placeholder="" clearable /> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-row>

              <el-divider />
              <div class="topic-head"> 能力版本信息 </div>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="当前版本" label-width="68">
                    <el-input disabled placeholder="" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="topic-head">能力交付管理</div>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="使用手册" label-width="68">
                    <el-upload
                      class="small-uploader"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="upload-tip">支持PDF、Word、zip、rar、7z格式，限制20M</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="测试报告" label-width="68">
                    <el-upload
                      class="small-uploader"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="upload-tip">支持PDF、Word、zip、rar、7z格式，限制20M</div>
                  </el-form-item>
                </el-col>
              </el-row>

              <div class="topic-head">能力部署包管理</div>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="部署包" label-width="68">
                    <el-upload
                      class="small-uploader"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="upload-tip">支持PDF、Word、zip、rar、7z格式，限制20M</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="footer">
          <el-button
            v-show="!showDetail"
            @click.stop="submitForm(myFormRef)"
            style="width: 120px; height: 30px; margin-left: 10px"
            type="primary"
            size="small"
            >提交</el-button
          >
          <el-button @click.stop="changeDialogShow" style="width: 120px; height: 30px" size="small">返回</el-button>
          <!-- <el-button type="primary" style="width: 120px;height: 30px" size="small">添加能力</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.ability-container {
  height: 100%;
  // padding: 20px 10px;
  position: relative;
  margin: 6px;
  padding-right: 10px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  .main-content {
    .table-container {
      padding-left: 20px;
      // width: 1300px;
      .btn-group {
        margin-top: 20px;
        // padding-left: 20px;
      }
      .table-body {
        min-height: 500px;
        max-height: 500px;
        overflow: auto;
        // padding: 20px;
        background-color: #fff;
        border-radius: 5px;
      }
    }
    .pagination {
      // margin-top: 30px;
      // width: 1280px;
      background: #fff;
      height: 60px;
      margin-left: 20px;
      display: flex;
      flex-direction: row-reverse;
      padding-right: 100px;
    }
  }
  .ability-modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
    .form {
      width: 70%;
      height: 80%;
      background-color: #fff;
      margin: 0 auto;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        i {
          font-size: 25px;
        }

        .char {
          font-weight: 600;
          width: 50px;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
        }
      }
      .content-wrapper {
        flex: 1;
        overflow: auto;
        border-top: var(--el-border);
        padding: 10px 40px;
        position: relative;
        .content {
          position: relative;
          .content-mask {
            position: absolute;
            background-color: transparent;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 9999;
          }
        }

        .edtior {
          :deep(.el-form-item__content) {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
          }
        }

        :deep(.ql-editor) {
          min-height: 180px;
          width: 100%;
        }
        :deep(.ql-toolbar) {
          width: 100%;
        }
        :deep(.ql-container) {
          width: 100%;
        }
        .tall-textarea {
          width: 100%;
          .el-textarea {
            :deep(.el-textarea__inner) {
              height: 158px;
            }
          }
        }
        .upload-tip {
          font-size: 12px;
          color: #d7d7d7;
        }
        .small-uploader {
          width: 145px;
          height: 30px;
          display: block;
          border: 1px solid var(--el-border-color);
          .el-icon.avatar-uploader-icon {
            font-size: 18px;
            color: #8c939d;
            width: 145px;
            height: 30px;
            text-align: center;
          }
        }
        .avatar-uploader {
          width: 145px;
          height: 105px;
          display: block;
          border: 1px dashed var(--el-border-color);
          .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 145px;
            height: 105px;
            text-align: center;
          }
        }
        .flex-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        .topic-head {
          height: 50px;
          line-height: 50px;
          transform: translateX(-20px);
        }
        .wrapper-outer {
          padding: 0 10px;
          border: var(--el-border);
          border-radius: 3px;
          width: 100%;
          margin-bottom: 18px;
          // padding-top: 10px;
          .header {
            height: 50px;
            margin-bottom: 10px;
            border-bottom: var(--el-border);
            color: #939397;
            display: flex;
            align-items: center;
            .title {
              font-size: 14px;
            }
            span {
              font-size: 12px !important;
              margin-left: 10px;
            }
          }
          .add-item {
            color: #02a7f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            background-color: rgb(247, 252, 255);
            width: 100%;
            height: 30px;
            border: 1px dashed rgb(182, 229, 251);
          }
          .content {
            padding: 10px 0;
            display: flex;
            width: 100%;
            justify-content: space-between;
          }
        }
      }
      .title,
      .footer {
        height: 50px;
      }
      .footer {
        width: 100%;
        display: flex;
        // justify-content: ;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 45px;
        border-top: 1px solid #e5e7eb;
      }
    }
  }
}
</style>
